<template>
	<n-grid :cols="12">
		<n-gi :span="item.span" v-for="(item, index) in cols" :key="index" class="h-full text-t-1">
			<div class="p-2 h-full">
				<div
					class="h-full flex items-center"
					:class="data?.gameName ? 'cursor-pointer' : 'cursor-not-allowed'"
					@click="handleClick"
					v-if="item.prop === 'game'">
					<div class="rounded-sm w-[24px] h-[24px] overflow-hidden">
						<base-image
							:src="imgSrc"
							default="placeholder.svg"
							:type="imgServer"
							class="w-[24px] h-[24px] object-cover"></base-image>
					</div>
					<span class="ml-2 h-full leading-[26px] overflow-hidden text-ellipsis whitespace-nowrap">
						{{ data?.gameName }}
					</span>
				</div>
				<div
					class="h-full flex items-center cursor-pointer"
					@click="handleProfile"
					v-else-if="item.prop === 'user'">
					<account-vip :level="data?.vip || 0"></account-vip>
					<span class="ml-1 leading-[26px] overflow-hidden text-ellipsis whitespace-nowrap">
						{{ data?.nickName || data?.userName }}
					</span>
				</div>
				<div class="h-full flex items-center flex-row-reverse" v-else-if="item.prop === 'bet'">
					<span><up-amount :value="(data?.payout / data?.multiplier).toFixed(1)" /></span>
				</div>
				<div
					class="h-full flex items-center flex-row-reverse"
					v-else-if="item.prop === 'multiplier'">
					<span>{{ data?.multiplier?.toFixed(1) }}X</span>
				</div>
				<div
					class="h-full flex items-center flex-row-reverse text-success"
					v-else-if="item.prop === 'payout'">
					<span><up-amount :value="data?.payout || 0" /></span>
				</div>
			</div>
		</n-gi>
	</n-grid>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { NGrid, NGi } from 'naive-ui'
import { BaseImage } from '@/components/base'
import UpAmount from '@/components/up/up-amount/index.vue'
import AccountVip from '@/components/account/account-vip/index.vue'
import { useProfileStore } from '@/store'
import { useRouter } from 'vue-router'
import { UpSwitchTabsEnum } from '@/components/up'

const props = defineProps({
	data: {
		type: Object as any,
		default: () => {}
	},
	type: {
		type: String,
		default: 'slot'
	},
	cols: {
		type: Array as any,
		default: () => []
	}
})

const profileStore = useProfileStore()
const router = useRouter()

const imgSrc = computed(() => {
	if (props.data?.gameIcon) {
		return props.data?.gameIcon
	}
	if (props.data?.icon) {
		return props.data?.icon
	}
	return 'placeholder.svg'
})

const imgServer = computed(() => {
	if (imgSrc.value.indexOf('http') === 0) {
		return 'network'
	}
	if (imgSrc.value !== 'placeholder.svg') {
		return 'server'
	}
	return 'local'
})

const handleProfile = () => {
	profileStore.showProfile({
		show: true,
		userId: props.data?.userId,
		tab: props.type === 'casino' ? UpSwitchTabsEnum.casino : UpSwitchTabsEnum.slots
	})
}

const handleClick = () => {
	if (props.type === 'casino') {
		if (!props.data?.fullGameName) return
		router.push({
			name: 'CasinoDetail',
			params: {
				id: props.data?.fullGameName
			}
		})
	} else {
		if (!props.data?.gameKey) return
		router.push({
			name: 'SlotsDetail',
			params: {
				id: props.data?.gameKey
			}
		})
	}
}
</script>
